import { Button, Card, Form, Input, message, Table } from "antd";
import React, { useEffect, useState } from "react";
import { SearchOutlined, SyncOutlined } from "@ant-design/icons";
import "./index.css";
import { fetchRequest } from "@/utils/Request";
import { url } from "@/utils/url";
import { useRequest } from "@umijs/hooks";

interface RecordParams {
  collegeName: string;
  index: number;
  num: number;
}

export const Index = () => {
  const [tableData, settableData] = useState<any>({}); // 表格数据
  const [RecordParams, setRecordParams] = useState<RecordParams>({
    collegeName: "",
    index: 1,
    num: 10,
  }); // 设置默认表格参数
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(true);

  //  确认搜索
  const handleFinish = (value: any) => {
    setRecordParams({ ...value, index: 1, num: 10 });
    const params = { ...RecordParams, ...value };
    getTableData.run(params);
  };

  //  重置按钮
  const handleReset = () => {
    form.resetFields();
  };

  //  表格头部
  const columns = [
    {
      title: "排名",
      dataIndex: "orderId",
      key: "orderId",
    },
    {
      title: "学校",
      dataIndex: "collegeName",
      key: "collegeName",
    },
    {
      title: "点亮人数",
      dataIndex: "lightCount",
      key: "lightCount",
    },
  ];

  //  获取学校数据接口
  async function getlightCollege(params: any) {
    try {
      const json = await fetchRequest(url.GET_LIGHTCOLLEGE, params);
      if (json.success) {
        settableData(json.data);
        setLoading(false);
      } else {
        message.destroy();
        message.error(json.error);
        setLoading(false);
      }
    } catch (error: any) {
      message.destroy();
      message.error(error.message);
    }
  }

  // 页码发生改变发送请求
  const pageChange = (page: any) => {
    const params = {
      ...RecordParams,
      index: page,
    };
    getTableData.run(params);
  };
  // 发送表格数据请求传参
  const getTableData = useRequest(getlightCollege, {
    manual: true,
    loadingDelay: 200,
  });

  useEffect(() => {
    getTableData.run(RecordParams);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  //  表格结构样式
  const tableRender = (
    <>
      <Table
        pagination={{
          pageSize: 10,
          total: tableData.total,
          onChange: pageChange,
        }}
        className={"table-form"}
        columns={columns}
        rowKey={(record: any) => record.orderId}
        dataSource={tableData.rows}
        loading={loading}
      />
    </>
  );

  //查询框
  const searchForm = (
    <Card className="search-form">
      <Form
        form={form}
        layout="inline"
        initialValues={{ deptState: "1" }}
        onFinish={handleFinish}
        onReset={handleReset}
      >
        <Form.Item
          className="form-control-item"
          name="collegeName"
          label="学校"
        >
          <Input className="search-form-item" />
        </Form.Item>

        <Form.Item className="form-control-item">
          <Button
            type="primary"
            icon={<SearchOutlined />}
            htmlType="submit"
            style={{ marginRight: "8px" }}
          >
            搜索
          </Button>
          <Button icon={<SyncOutlined />} htmlType="reset">
            重置
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
  return (
    <>
      {searchForm}
      {tableRender}
    </>
  );
};
export default Index;
